<template>
	<view class="content">
		<u-empty v-if="!mateList"></u-empty>
		<view class="mate_box">
			<view class="item_header flex flex_align">
				<view class="left">材料</view>
				<view class="right">价格</view>
			</view>
			<view class="item_cont flex flex_align" v-for="(item,i) in mateList" :key="i">
				<view class="left">
					{{item.name}}
				</view>
				<view class="right">
					{{item.price}}元
				</view>
			</view>
			<view class="footer flex flex_align">
				<view class="left">
					总价
				</view>
				<view class="right">
					{{total}}元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mateList:[
					// {name:'材料1',price:25},
					// {name:'材料1',price:25},
					// {name:'材料1',price:39},
					// {name:'材料1',price:25},
					// {name:'材料1',price:25},
				],
				// total:0
			};
		},
		computed:{
			total(){
				let total = 0	
				this.mateList.forEach(item=>{
					return total+=parseInt(item.price)
				})
				return total
			}
		},
		onLoad(option){
			if(!option.list) return this.mateList = []
			this.mateList = option.list
		}
	}
</script>

<style lang="scss">
.content{
	margin: 20rpx;
	padding: 40rpx;
	background: #fff;
	border-radius: 20rpx;
}
.mate_box{
	.item_header{
		.left{
			border-top-left-radius: 20rpx;
		}
		.right{
			border-top-right-radius: 20rpx;
		}
		.right,.left{
			width: 50%;
			border: 1px solid #ddd;
			padding: 30rpx 0;
			text-align: center;
		}
	}
	.item_cont{
		
		.left,.right{
			width: 50%;
			// border: 1px solid red;
			border-bottom: 1px solid #ddd;
			padding: 30rpx 0;
			text-align: center;
		}
		.left{
			border-left: 1px solid #ddd;
			border-right:1px solid #ddd ;
		}
		.right{
			border-right: 1px solid #ddd;
		}
	}
	.footer{
		border-bottom-left-radius: 	20rpx;
		border-bottom-right-radius: 20rpx;
		border: 1px solid #dce2f0;
		overflow: hidden;
		.left,.right{
			width: 50%;
			padding: 30rpx 0;
			text-align: center;
			background-color: #dce2f0;
			font-size: 28rpx;
			
		}
	}
}
</style>
